<template>
  <div class="banner">
    <el-form :inline="true">
      <el-form-item>
        <el-dropdown @command="setPageType">
          <span class="el-dropdown-link">
            {{pageTypeStr}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{title:'全部页面类型',id:''}">全部页面类型</el-dropdown-item>
            <el-dropdown-item :command="{title:'小程序首页',id:1}">小程序首页</el-dropdown-item>
            <el-dropdown-item :command="{title:'员工端首页',id:2}">员工端首页</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
      <el-form-item>
        <el-dropdown @command="setModeType">
          <span class="el-dropdown-link">
            {{modeTypeStr}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{title:'全部合作模式',id:''}">全部合作模式</el-dropdown-item>
            <el-dropdown-item :command="{title:item.name,id:item.id}"
              v-for="item in modeList"
              :key="item.id">{{item.name}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请输入跳转页面名称/链接"
          clearable
          style="width:300px"
          v-model="search"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
          @click.native="_reset"
          size="small"
          style="width:60px">
          <i class="el-icon-search"></i>
        </el-button>
      </el-form-item>
      <el-form-item class="fr">
        <el-button type="primary"
          size="small"
          @click="add"
          style="width:60px">
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <el-form>
      <el-table :data="banners"
        max-height="600">
        <el-table-column label="编号" prop="id"
          width="100"
          fixed>
         
        </el-table-column>
        <el-table-column label="页面类型"
          width="120"
          prop="typeName">
        </el-table-column>
        <el-table-column label="跳转页面名称"
          width="120"
          prop="name">
        </el-table-column>
        <el-table-column label="跳转页面链接"
          width="300"
          prop="site">
        </el-table-column>
        <el-table-column :label="item.name"
          width="120"
          v-for="(item,index) in modeList"
          :key="index">
          <template slot-scope="scope">
            <div>
              {{scope.row.modes.indexOf(item.id)>-1 ?'✔':''}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建人"
          width="120"
          prop="operator">
        </el-table-column>
        <el-table-column label="创建时间"
          width="300"
          prop="createTime">
        </el-table-column>
        <el-table-column label="操作"
          fixed="right"
          width="200">
          <template slot-scope="scope">
            <el-button type="text"
              @click="_edit(scope.row,true)">查看详情</el-button>
            <el-button type="text"
              @click="_edit(scope.row)">修改</el-button>
            <el-button type="text"
              @click="_delete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-form-item class="fr">
        <el-pagination @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, prev , pager , next, sizes"
          :total="total"
          style="margin-top:20px">
        </el-pagination>
      </el-form-item>
    </el-form>
    <!-- 编辑、新增 -->
    <el-dialog :title="title"
      :visible.sync="dialogVisible"
      @close="resetForm('form')"
      width="600px">
      <el-form label-width="100px"
        :disabled="isLook"
        :rules="rules"
        :model="form"
        ref="form">
        <el-form-item label="页面类型"
          prop="type">
          <el-select v-model="form.type"
            prop="type">
            <el-option label="小程序酒店首页"
              :value="1"></el-option>
            <el-option label="员工端首页"
              :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="跳转页面名称"
          prop="name">
          <el-input placeholder="请输入跳转页面名称"
            v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="着落页面"
          prop="site">
          <el-input placeholder="请输入着落页面"
            v-model="form.site"></el-input>
        </el-form-item>
        <el-form-item label="选择合作模式"
          prop="modeIds">
          <el-checkbox-group v-model="form.modeIds">
            <el-checkbox v-for="item in modeList"
              :key="item.id"
              :label="item.id">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <div v-if="!isLook">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary"
            @click="srue('form')">确 定</el-button>
        </div>
        <el-button @click="dialogVisible = false"
          v-else>关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getHotelBannerList,
  updateHotelBanner,
  deteletHotelBanner
} from "@/public/js/banner.js";
import { getModeList } from "@/public/js/mode";
export default {
  components: {},
  props: {},
  data() {
    return {
      pageTypeStr: "全部页面类型",
      modeTypeStr: "全部合作模式",
      pageNo: 1,
      pageSize: 10,
      dialogVisible: false,
      type: "",
      modeId: "",
      search: "",
      total: 0,
      banners: [],
      modeList: [],
      isLook: false,
      title: "新增",
      form: {
        id: "",
        type: "",
        name: "",
        site: "",
        modeIds: []
      },
      rules: {
        name: [
          { required: true, message: "请输入跳转页面名称", trigger: "blur" }
        ],
        type: [
          { required: true, message: "请选择页面类型", trigger: "change" }
        ],
        site: [{ required: true, message: "请输入着陆页面", trigger: "blur" }],
        modeIds: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个合作模式",
            trigger: "blur"
          }
        ]
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    _getModeList() {
      getModeList().then(res => {
        this.modeList = res.data.modes;
      });
    },
    _getHotelBannerList() {
      getHotelBannerList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        type: this.type,
        modeId: this.modeId,
        search: this.search
      }).then(res => {
        this.banners = res.data.banners;
        this.total = res.data.total;
      });
    },
    init() {
      this._getHotelBannerList();
      this._getModeList();
    },
    _reset() {
      this.pageNo = 1;
      this.pageSize = 10;
      this._getHotelBannerList();
    },
    add() {
      this.title = "新增";
      this.dialogVisible = true;
      this.isLook = false;
      this.form = {
        id: "",
        type: "",
        name: "",
        site: "",
        modeIds: []
      };
      
    },
    _edit(row, isLook) {
      let { id, type, name, site, modes } = row;
      this.isLook = isLook;
      this.form = {
        id,
        type,
        name,
        site,
        modeIds: modes
      };
      this.title = this.isLook ? "查看详情" : "编辑";
      this.dialogVisible = true;
    },
    setPageType(command) {
      this.pageTypeStr = command.title;
      this.type = command.id;
      this._reset();
    },
    setModeType(command) {
      this.modeTypeStr = command.title;
      this.modeId = command.id;
      this._reset();
    },
    srue(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          updateHotelBanner(this.form).then(res => {
            if (!res.data.errCode) {
              this.$message.success("操作成功");
              this.dialogVisible = false;
              this._getHotelBannerList();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //删除
    _delete(id) {
      this.$confirm("是否继续该删除操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deteletHotelBanner({ id: id }).then(res => {
          if (!res.data.errCode) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this._getHotelBannerList();
          }
        });
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //分页
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this._getHotelBannerList();
    },
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this._getHotelBannerList();
    }
  },
  created() {
    this.init();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>